<!--vue模板-->
<template>
  <div>
    <!--功能按钮-->
    <div style="text-align: right">
      <el-button type="primary" @click="add">添加</el-button>
    </div>
    <!--客户列表-->
    <el-table :data="tableData" style="width: 100%" stripe border>
      <el-table-column
        type="index"
        label="行号"
        width="80"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="company"
        label="客户公司名称"
        width="180"
        header-align="center"
      />
      <el-table-column
        prop="contactName"
        label="联系人"
        width="180"
        header-align="center"
      />
      <el-table-column
        prop="mobile"
        label="联系方式"
        width="120"
        header-align="center"
      />
      <el-table-column
        prop="market"
        label="市场"
        width="120"
        header-align="center"
      />
      <el-table-column
        prop="customer_type"
        label="客户类型"
        width="120"
        header-align="center"
      />
      <el-table-column
        prop="customer_email"
        label="邮箱"
        width="120"
        header-align="center"
      />
      <el-table-column
        prop="createdTime"
        label="创建时间"
        width="120"
        header-align="center"
      />
      <el-table-column
        prop="saleId"
        label="所属销售"
        width="120"
        header-align="center"
      />
      <el-table-column
        prop="source"
        label="来源"
        width="120"
        header-align="center"
      />
      <el-table-column label="操作" header-align="center" align="center">
        <el-button type="primary" :icon="Edit" circle title="修改" />
        <el-button type="primary">下单记录</el-button>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div
      style="
        background-color: #fff;
        height: 50px;
        line-height: 50px;
        text-align: right;
      "
    >
      <el-pagination
        background
        :page-size="pageSize"
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
        @size-change="chgsize"
        @current-change="chgpg"
      />
    </div>
  </div>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, onMounted } from "vue";
//引入api
import { queryCustomer } from "@/api/customer.js";
//引入图标
import { Delete, Edit } from "@element-plus/icons-vue";
//引入路由
import { useRouter } from "vue-router";
//表格数据
const tableData = ref([{ company: "sss" }]);
//路由实例
const router = useRouter();

//添加客户
function add() {
  router.push("/customer/add");
}

//分页信息
const page = ref(1); //当前页 默认第1页
const pageSize = ref(10); //每页记录数
const total = ref(0); //总记录数

//每页记录数变化
function chgsize(size) {
  //更改每页记录数
  pageSize.value = size;
  //从每页开始查询
  page.value = 1;
  //查询数据
  initData();
}

//页面发生变化
function chgpg(pg) {
  //更改当前页
  page.value = pg;
  //查询数据
  initData();
}

//查询数据
async function initData() {
  //请求
  let data = {
    page: page.value,
    pageSize: pageSize.value
  };
  let res = await queryCustomer(data);
  if (res.code == 200) {
    tableData.value = res.data.data;
    //接收分页信息
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }
}

//生命周期钩子
onMounted(() => {
  initData();
});
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped></style>
